import React from 'react';
import { Card, Typography, Button, Space } from 'antd';
import { BarChartOutlined, LineChartOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const Analytics = () => {
  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '24px' }}>
        <Title level={2} style={{ margin: 0, color: '#1D2129' }}>
          数据分析
        </Title>
        <Paragraph style={{ margin: '8px 0 0 0', color: '#4E5969' }}>
          分析知识图谱的使用情况和数据洞察
        </Paragraph>
      </div>

      <Card 
        style={{ 
          textAlign: 'center',
          padding: '60px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}
      >
        <BarChartOutlined style={{ fontSize: '64px', color: '#165DFF', marginBottom: '16px' }} />
        <Title level={3} style={{ color: '#1D2129', marginBottom: '8px' }}>
          数据分析功能
        </Title>
        <Paragraph style={{ color: '#4E5969', marginBottom: '24px' }}>
          此功能正在开发中，敬请期待
        </Paragraph>
        <Space>
          <Button type="primary" icon={<LineChartOutlined />}>
            生成报告
          </Button>
          <Button>
            查看示例
          </Button>
        </Space>
      </Card>
    </div>
  );
};

export default Analytics;